<template>
	<view class="page-container">
		<scroll-view scroll-y class="scroll-container" :style="{ height: scrollHeight + 'px' }">

			<view v-for="(item, index) in userRecordDetail" :key="index" class="item-container">
				<up-cell-group>
					<up-cell title="ID" :value="item.id"></up-cell>
					<up-cell title="打卡时间" :value="pageParam.date"></up-cell>
          <up-cell title="手机号" :value="item.phone"></up-cell>
					<up-cell title="粉丝数" :value="item.fans"></up-cell>
					<up-cell title="审核状态" :value="getStatusText(item.status)"></up-cell>
					<up-cell title="失败原因" v-if="item.status === -1" :value="userRecordDetail.revoke_remark"> </up-cell>
				</up-cell-group>
				<view class="u-page">
					<view class="album__content">
						<up-album :urls="item.image_urls" multipleSize="100"></up-album>
					</view>
				</view>
				<up-button v-if="item.status === -1" type="primary" @click="reSubmit(item)">重新提交</up-button>
      </view>

		</scroll-view>
	</view>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { getClockInDesc } from '@/api/upload.js';
import { onLoad } from '@dcloudio/uni-app';
import { useUserInfo } from '@/stores/userInfo.js';

let pageParam = ref({
  date : ref("")
})

const statusTextMap = {
  '-2': '当天没有打卡',  //虚构出来的状态,没有打卡是没有记录的
  '-1': '拒绝通过',
  0: '审核中',
  1: '打卡通过',
};


let userRecordDetail = ref([]);

// 添加滚动高度计算
const scrollHeight = ref(0);

const userStore = useUserInfo();

onLoad((option) => {
  console.log("跳转到打卡详情页面.");
	//通过路由跳转来到打卡详细页面,option为导航入口传递的参数,拿到时间 在onMounted中挂载了
  pageParam.value.date = JSON.stringify(JSON.parse(option.date));
  console.log("当前页面传递的日期参数:",pageParam);
});

onMounted(() => {
  //获取用户指定日期的打卡详情
	getUserSpecifiedUploadRecordDetail();
	// 获取系统信息设置滚动高度
	const systemInfo = uni.getSystemInfoSync();
	scrollHeight.value = systemInfo.windowHeight;
});

let getUserSpecifiedUploadRecordDetail = async () => {
	let date = pageParam.value.date.replaceAll('-', '').substring(1, 9);
	let result = await getClockInDesc({ wxopenid: userStore.userData.wxopenid, someDay: date });
  console.log(date,"打卡详情",result);
	if (result.success) {
		userRecordDetail.value = result.data;
	}
};

const getStatusText = (status) => {
	return statusTextMap[status] || '未知状态';
};

let reSubmit = async (e) => {
	// console.log(e, '重新提交');
	// 将对象转换为字符串，并进行编码
	const encodedData = encodeURIComponent(JSON.stringify(e));
	console.log(encodedData);
	uni.reLaunch({
		url: `/pages/clockIn/index?revokeData=${encodedData}`,
	});
};

</script>

<style lang="scss" scoped>
.page-container {
	width: 100%;
	height: 100vh;
	background-color: #f5f5f5;
}

.scroll-container {
	width: 100%;
	background-color: #f5f5f5;
}

.item-container {
	background-color: #fff;
	border-radius: 12rpx;
	margin: 20rpx;
	padding: 20rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

:deep(.u-album__row) {
	width: 100%;
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
}

:deep(.u-album) {
	width: 100%;
}

.u-page {
	padding: 20rpx 0;
}

.album__content {
	display: flex;
	justify-content: flex-start;
	flex-wrap: wrap;
	gap: 10rpx;
}
</style>
